<template>
  <p>使用类名 merak-table-container 可以将 table 组件的样式复用在 el-table 组件上</p>
  <p>点选高亮需要设置 el-table 本身的属性 highlight-current-row</p>
  <el-table class="merak-table-container" :data="tableData" border highlight-current-row style="width: 100%">
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="age" label="Age" :resizable="false" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  <slot :html="html" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const html = ref(`
<template>
  <el-table class="merak-table-container" :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="age" label="Age" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup lang="ts">
const tableData = [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
];
<\/script>
`);

const tableData = [
  {
    id: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  },
  {
    id: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
  },
  {
    id: "3",
    name: "Not Expandable",
    age: 29,
    address: "Jiangsu No. 1 Lake Park",
    description: "This not expandable"
  },
  {
    id: "4",
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
  }
];
</script>
